<template>
  <div id="webInformation">
    <el-form ref="temp" :model="temp" label-width="140px">
      <el-form-item label="公司信息" prop="message">
        <el-input v-model="temp.message"></el-input>
      </el-form-item>
      <el-form-item label="公司名称" prop="name">
        <el-input v-model="temp.name"></el-input>
      </el-form-item>
      <el-form-item label="密码等级" prop="passwordLevel">
        <el-input v-model="temp.passwordLevel"></el-input>
      </el-form-item>
      <el-form-item label="系统自动退出时间" prop="quitTime">
        <el-input v-model="temp.quitTime"></el-input>
      </el-form-item>
      <el-form-item label="网络域名" prop="workDomain">
        <el-input v-model="temp.workDomain"></el-input>
      </el-form-item>
      <el-form-item label="logo" prop="webLogo">
        <el-upload
          action=""
          list-type="picture"
          :auto-upload="false"
          :on-change="handleChangePic"
          :file-list="fileList"
        >
          <el-button slot="default" size="mini" plain type="custom"
            >上传<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="登录背景图片" prop="field1">
        <el-upload
          action=""
          list-type="picture"
          :auto-upload="false"
          :on-change="backHandleChangePic"
          :file-list="backFileList"
        >
          <el-button slot="default" size="mini" plain type="custom"
            >上传<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="backHandleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="backHandleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog
          :visible.sync="backdialogVisible"
          :close-on-click-modal="false"
        >
          <img width="100%" :src="backdialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item
        label="默认用户图片"
        prop="userPic"
        style="margin-bottom: 0px"
      >
        <el-upload
          action=""
          list-type="picture"
          :auto-upload="false"
          :on-change="userHandleChangePic"
          :file-list="userFileList"
        >
          <el-button slot="default" size="mini" plain type="custom"
            >上传<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="userHandleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="userHandleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog
          :visible.sync="userdialogVisible"
          :close-on-click-modal="false"
        >
          <img width="100%" :src="userdialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <div>
      <el-button  type="custom" v-preventReClick  class="jurisdiction" @click="handleUpdate()"
        >提 交</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  tbSysSiteQuery,
  tbSysSiteAdd,
  tbSysSiteUpdate,
  tbSysSiteDelete,
  // tbSysSiteQueryById,
  tbSysAddressQueryBySiteId,
} from "@/api/admin/system/webInformation.js";
import {
  tbSysAttachmentUpload,
  tbSysAttachmentQueryPathById,
} from "@/api/http.js";
import { getSession, setSession } from "@/utils/session";

export default {
  data() {
    return {
      temp: {
        labelpageName: "",
        field1: "",
        id: "872916039618451191539bc394c39664",
      },
      tabs: 1,
      king: "1",
      listQuery: {
        page: 1,
        limit: 10,
        linkName: "", //链接名称
      },
      herfData: [],
      loading: false,
      pageObj: {},
      dialogTitle: "网站友情链接-新增",
      dialogFormVisible: false,
      addOrEdit: true,
      hrefTemp: {},

      webInformationData: {},
      fileList: [],
      fileTemp: [],
      backFileList: [],
      userFileList: [],
      userFileTemp: [],
      backFileTemp: [],
      logoImageId: "",
      backImageId: "",
      userImageId: "",
      dialogImageUrl: "",
      backdialogImageUrl: "",
      userdialogImageUrl: "",
      dialogVisible: false,
      backdialogVisible: false,
      userdialogVisible: false,
      disabled: false,
    };
  },
  created() {
    // this.temp = JSON.parse(getItem("webInformationData"));
    this.getHrefList();
    this.getList();
  },
  methods: {
    //根据id查询信息
    getList() {
  
      // this.$store.dispatch("setwebinfo").then((res) => {
      //   console.log(res);
      // });
      // tbSysSiteQueryById(this.temp.id).then((res) => {
      //   let webInformationData = res.data.data[0];
      //   setSession("webinfo", JSON.stringify(webInformationData));
      //   this.temp = webInformationData;

      //   this.fileList = [{ url: this.baseURL + '/tbSysAttachment/download/' + this.temp.webLogo }];
      //   this.backFileList = [{ url:  this.baseURL + '/tbSysAttachment/download/' + this.temp.field1 }];
      //   this.userFileList = [{ url:  this.baseURL + '/tbSysAttachment/download/' + this.temp.userPic }];

      //   // this.getImageUrl(this.temp.field1, "back");
      //   // this.getImageUrl(this.temp.userPic, "user");
      //   // this.getImageUrl(this.temp.webLogo, "logo");
      // });
    },
    //获取网站基本信息
    getUserInfo() {
      this.temp = JSON.parse(getItem("webInformationData"));
    },
    //获取图片链接
    getImageUrl(id, type) {
      tbSysAttachmentQueryPathById(id).then((res) => {
        if (type == "logo") {
          let arr = [];
          let obj = { url: res.data.data[0] };
          arr.push(obj);
          this.fileList = arr;
        } else if (type == "user") {
          let arr = [];
          let obj = { url: res.data.data[0] };
          arr.push(obj);
          this.userFileList = arr;
        } else if (type == "back") {
          let arr = [];
          let obj = { url: res.data.data[0] };
          arr.push(obj);
          this.backFileList = arr;
        }
      });
    },
    getHrefList() {
      tbSysAddressQueryBySiteId(this.temp.id).then((res) => {
        this.herfData = res.data.data;
      });
    },
    // 显示编辑弹出框
    showEditDialog(type, row) {
      if (type == "edit") {
        this.addOrEdit = true;
        this.dialogTitle = "网站友情链接-编辑";
      } else {
        this.addOrEdit = false;
        this.dialogTitle = "网站友情链接-新增";
      }
      this.hrefTemp = { ...row };
      this.dialogFormVisible = true;
    },
    //新增
    hrefAdd(hrefTemp) {
      this.$refs[hrefTemp].validate((valid) => {
        if (valid) {
          this.hrefTemp.siteId = this.temp.id;
          tbSysAddressAdd(this.hrefTemp).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("保存成功");
              this.dialogFormVisible = false;
              this.getHrefList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    //编辑
    hrefUpdate(hrefTemp) {
      this.$refs[hrefTemp].validate((valid) => {
        if (valid) {
          tbSysAddressUpdate(this.hrefTemp).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("保存成功");
              this.dialogFormVisible = false;
              this.getHrefList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    // 删除
    showDeleDialog(row) {
      this.$confirm("确认删除？删除之后不再恢复", "提示", {
        type: "warning",
      })
        .then((_) => {
          tbSysAddressDelete(row.id).then((res) => {
            if (res.data.code == 0) {
              this.$message.success("删除成功");
              this.getHrefList();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch((_) => {});
    },
    handleUpdate() {
      if (this.logoImageId != "") {
        this.temp.webLogo = this.logoImageId;
      }
      if (this.backImageId != "") {
        this.temp.field1 = this.backImageId;
      }
      if (this.userImageId != "") {
        this.temp.userPic = this.userImageId;
      }
      this.temp.del = "1";

      tbSysSiteUpdate(this.temp).then((res) => {
        document.title = this.temp.message;
        setSession("QueryHome", JSON.stringify(this.temp));
        if (res.data.code === "0") {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          // document.title = this.temp.labelPageName;
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
        this.getList();
      });
    },
    handleClick(tab, event) {
      this.tabs = tab;
    },
    //修改基本信息
    updatBasic() {},
    //上传LOGO
    handleChangePic(file, fileList) {
      this.fileTemp = file.raw;
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.fileImport();
    },
    fileImport() {
      let formdata = new FormData();
      formdata.append("file", this.fileTemp);

      tbSysAttachmentUpload(formdata).then((res) => {
        if (res.data.code === "0") {
          this.$message.success(res.data.msg);
          this.logoImageId = res.data.data[0].id;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {},

    //上传首页背景图
    backHandleChangePic(file, fileList) {
      this.backFileTemp = file.raw;
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.backFileImport();
    },
    backFileImport() {
      let formdata = new FormData();
      formdata.append("file", this.backFileTemp);

      tbSysAttachmentUpload(formdata).then((res) => {
        if (res.data.code === "0") {
          this.$message.success(res.data.msg);
          this.backImageId = res.data.data[0].id;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    backHandleRemove(file, fileList) {
      this.backFileTemp = null;
    },
    backHandlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.backdialogVisible = true;
    },
    backHandleDownload(file) {},
    //上传用户默认图片
    userHandleChangePic(file, fileList) {
      this.userFileTemp = file.raw;
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.userFileImport();
    },
    userFileImport() {
      let formdata = new FormData();
      formdata.append("file", this.userFileTemp);
      tbSysAttachmentUpload(formdata).then((res) => {
        if (res.data.code === "0") {
          this.$message.success(res.data.msg);
          this.userImageId = res.data.data[0].id;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    userHandleRemove(file, fileList) {
      this.userFileTemp = null;
    },
    userHandlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.userdialogVisible = true;
    },
    userHandleDownload(file) {},
  },
};
</script>
<style>
.left-menu {
  display: block;
}
div#webInformation {
  padding-bottom: 160px;
}
div#webInformation .el-upload.el-upload--picture {
  display: inline-block;
  float: left;
  margin-right: 40px;
}

div#webInformation ul.el-upload-list.el-upload-list--picture {
  display: inline-block;
}
div#webInformation .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 120px;
}
</style>